<template>
	<view class="">
		<view class="borbt bgfff navList">
			<view class="flex juCen">
				<view v-for="(item,index) in technologicalProcess" class="navItem por textCenter" :class="navCurrentInd == index ? 'navCurrentCla mainColor' : 'd1Color'"
				 :key="index" @click="navCurrentInd = index">{{item.title}}
					<view class="" style="position: absolute;top:8px;right: 65rpx;color: #FF5753;font-size: 10px;">{{item.num}}</view>
				</view>
			</view>
			<view class="heiGy12"></view>
		</view>
		<!-- 流程 -->

		<swiper class="bgfff" :current="navCurrentInd" @change="setCurr" :style="{height:swiperheight+'px'}">
			<swiper-item class="bgfff" v-for="(item,index) in technologicalProcess" :key="index">
				<scroll-view scroll-y="true" class="h100 p15" @scrolltolower="pageNum = pageNum + 1,AllgetData()">
					<view class="searchHeas">
						<image src="../../../static/img/polling/search.png" mode=""></image>
						<input type="text" value="" :placeholder="navCurrentInd == 2 ? '搜索笔记' : '搜索姓名'" @input="searchChang" placeholder-class="grayColor"  />
					</view>
					<block v-if="navCurrentInd == 0">
						<view v-if="dataList.length > 0">
							<view class="" v-for="(item,index) in dataList" :key="index">
								<view class="tops">
									<view class="disa">
										<view class="backsub"></view>
										<view class="zhang">
											<view class="co34 f18">{{item.customerName}}</view>
											<view v-if="item.sex == '男'" class="back cont">男</view>
											<view v-if="item.sex == '女'" class="backs cont">女</view>
										</view>
									</view>
									<view class="disms">
										<view class="">
											<view class="m10 disau">
												<view class="f12 co98 w50">公司名称：</view>
												<view class="f12 co34">{{item.customerCompany}}</view>
											</view>
											<view class="m10 disau" @click="callst(item.phoneNumber)">
												<view class="f12 co98 w50">联系方式：</view>
												<view class="f12 co34">{{item.phoneNumber}}</view>
											</view>
											<view class="m10 disau">
												<view class="f12 co98 w50">维护人：</view>
												<view class="f12 co34">{{item.createBy}}</view>
											</view>
										</view>
										<image class="images" @click="news_client(item.customerId,index)" v-if="item.isMe == 1" src="../../../static/img/detailsMsg/compile.png"
										 mode=""></image>
										<image class="images" v-if="item.isMe == 2" src="../../../static/img/detailsMsg/compileno.png" mode=""></image>
									</view>
								</view>
							</view>
							<view class="news" @click="news_client()">
								<image style="width: 20px;height: 20px;padding: 20px;" src="../../../static/img/detailsMsg/new.png" mode=""></image>
							</view>
						</view>
						<view v-else>
							<view class="news" @click="news_client()">
								<image style="width: 20px;height: 20px;padding: 20px;" src="../../../static/img/detailsMsg/new.png" mode=""></image>
							</view>
							<nullPage></nullPage>
						</view>
					</block>
					<block v-if="navCurrentInd == 1">
						<view v-if="address_list.length > 0">
							<view class="" v-for="(item,index) in address_list" :key="index">
								<view class="tops">
									<view class="disa">
										<view class="backsub"></view>
										<view class="zhang">
											<view class="co34 f18">{{item.userName}}</view>
											<view class="backcore">{{item.roleName}}</view>
										</view>
									</view>
									<view class="disms" @click="callst(item.phonenumber)">
										<view class="">
											<view class="m10 disau">
												<view class="f12 co34">{{item.phonenumber}}</view>
											</view>
										</view>
										<image class="images" src="../../../static/img/detailsMsg/phones.png" mode=""></image>

									</view>
								</view>
							</view>
						</view>
						<view v-else>
							<nullPage></nullPage>
						</view>
					</block>
					<block v-if="navCurrentInd == 2">
						<view v-if="memorandumList.length > 0">
							<view class="" v-for="(item,index) in memorandumList" :key="index" @click="navRouter(`/pages/gird/market/newMemorandum?memoId=${item.memoId}`)">
								<view class="tops disa meNmor">
									<view class="w90">
										<view class="disa" >
											<view class="backsub"></view>
											<view class="co34 textOver f18">{{item.memoContent}}</view>
										</view>
										<view class="ml17">{{item.createTime.split(" ")[0]}}</view>
									</view>
									
									<image class="DelectIcon" src="../../../static/img/delectIcon.png" mode="" @click.stop="delectMemoCont(index,item.memoId)"></image>
								</view>
							</view>
						</view>
						<view v-else>
							<nullPage></nullPage>
						</view>
						<view class="news" @click="navRouter('/pages/gird/market/newMemorandum')">
							<image style="width: 20px;height: 20px;padding: 20px;" src="../../../static/img/detailsMsg/new.png" mode=""></image>
						</view>
					</block>
				</scroll-view>
			</swiper-item>
		</swiper>

	</view>

</template>

<script>
	import nullPage from '@/common/null.vue' //选择器值 
	import submit from "@/serve/api/submit.js"
	export default {
		components: {
			nullPage
		},
		data() {
			return {
				technologicalProcess: [],
				navCurrentInd: 0, //  下标+1
				pageNum: 1,
				dataList: [], //客户列表
				address_list: [], //通讯录列表
				memorandumList: [], //备忘录列表
				swiperheight: 0,
				loadingText: '加载中...',
				searchText:"",
				timeout:"",
			}
		},
		onLoad(e) {
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef H5
					let height = res.screenHeight - 90

					// #endif
					// #ifdef APP-PLUS
					let height = res.screenHeight - 125

					// #endif
					this.swiperheight = height;
				},
			})
			this.tabs()
			this.getEventQuery()
		},
		methods: {
			async tabs() {
				let parme = {}
				const res = await submit.querySalesHeadNums(parme)
				this.technologicalProcess = res.data.data
			},
			 searchChang(e){
				  clearTimeout(this.timeout)
				  this.timeout = setTimeout(() => {
					  
					  this.searchText = e.detail.value
					  this.pageNum = 1;
					  this.dataList = [];
					  this.address_list = [];
					  this.memorandumList = [];
					  this.AllgetData()
				  }, 1000)
			 },
			setCurr(e) {
				this.navCurrentInd = e.detail.current || 0;
				this.pageNum = 1;
				this.dataList = [];
				this.address_list = [];
				this.memorandumList = [];
				this.AllgetData()
				
			},
			
			AllgetData(){
				if (this.navCurrentInd == 0) {
					this.getEventQuery();
				} else if (this.navCurrentInd == 1) {
					this.address();
				} else if (this.navCurrentInd == 2) {
					this.getMemorand()
				}
			},
			
			// 获取列表
			async getEventQuery(e) {
				let parme = {
					pageSize: 5,
					pageNum: this.pageNum,
					customerName:this.searchText
				}
				const res = await submit.selectCustomerList(parme)
				if (res) {
					this.dataList = this.dataList.concat(res.data.data.list)
					if (res.data.data.list.length < 5 && this.dataList.length > 0) {
						this.tip("已加载全部")
					} else if (res.data.data.list.length == 0) {
						this.tip("暂无数据")
					}
				}
			},
			news_client(id, index) {
				if (id) {
					uni.navigateTo({
						url: `news_client?id=${id}&index=${index}`
					})
				} else {
					uni.navigateTo({
						url: 'news_client'
					})
				}
			},
			// 获取通讯列表
			async address(e) {
				let parme = {
					pageSize: 10,
					pageNum: this.pageNum,
					userName:this.searchText
				}
				const res = await submit.selectAddressBook(parme)
				if (res) {
					this.address_list = this.address_list.concat(res.data.data.list)
					if (res.data.data.list.length < 10 && this.address_list.length > 0) {
						this.tip("已加载全部")
					} else if (res.data.data.list.length == 0) {
						this.tip("暂无数据")
					}
				}
			},
			
			async getMemorand() {
				let parme = {
					pageSize: 10,
					pageNum: this.pageNum,
					memoContent:this.searchText,
				}
				const res = await submit.selectMemoNoteList(parme)
				if (res) {
					this.memorandumList = this.memorandumList.concat(res.data.data.list)
					if (res.data.data.list.length < 10 && this.memorandumList.length > 0) {
						this.tip("已加载全部")
					} else if (res.data.data.list.length == 0) {
						this.tip("暂无数据")
					}
				}
			},
			delectMemoCont(ind,e){
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除吗？',
				    success: async function (res) {
				        if (res.confirm) {
							const da = await submit.deleteMemoNote({memoId:e})
							if(da){
								that.technologicalProcess[2].num = that.technologicalProcess[2].num - 1
								that.memorandumList.splice(ind , 1)
							}
						}
				    }
				});
			},
			//拨打电话
			callst(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},

		}
	}
</script>

<style scoped lang="scss">
	// @import url("/static/css/eventRece.css");
	.borbt {
		border-bottom: 1px solid #F9F9F9;
	}

	.bgfff {
		background-color: #FFFFFF;
	}

	.juCen {
		display: flex;
		justify-content: space-between;
		// padding: 0 60px;
		box-sizing: border-box;
	}

	.navList .navItem {
		height: 40px;
		line-height: 40px;
		width: 33.333%;
		white-space: nowrap;
		font-size: 32rpx;
		color: #989BA6;
		position: relative;
	}

	.navList .mainColor {
		color: #017EFE;
	}

	.textCenter {
		text-align: center;
	}

	.por {
		position: relative;
	}

	.navCurrentCla::after {
		content: "";
		width: 50%;
		position: absolute;
		height: 2px;
		bottom: 1rpx;
		left: 50%;
		transform: translateX(-50%);
		background-color: #017EFE;
	}

	.p15 {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.back {
		width: 10px;
		height: 10px;
		background: url(../../../static/img/detailsMsg/man.png) no-repeat;
		background-size: 100%;
	}

	.backs {
		width: 10px;
		height: 10px;
		background: url(../../../static/img/detailsMsg/sex.png) no-repeat;
		background-size: 100%;
	}
	.searchHeas{
		width: calc(100vw - 80rpx);
		height: 80rpx;
		margin-top: 20rpx;
		background: #FFFFFF;
		border: 1px solid #E5E8F1;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		image{
			width: 35rpx;
			height: 36rpx;
			margin:0 20rpx;
		}
		input{
			flex: 1;
		}
		.grayColor{
			color: #ADB5C5;
		}
		

	}
	.co34 {
		color: #34363D;
	}

	.f18 {
		font-size: 16px;
		font-weight: bold;
	}

	.pt20 {
		margin-top: 30px;
	}

	.f12 {
		font-size: 14px;
	}

	.co98 {
		color: #989BA6;
	}

	.m10 {
		margin-top: 10px;
	}

	.h100 {
		height: 100%;
	}

	.tops {
		padding-top: 15px;
		border-bottom: 1px solid #F2F4F8;
		padding-bottom: 15px;
	}

	.disa {
		display: flex;
		align-items: center;
	}
	.meNmor{
		justify-content: space-between;
	}
	.w90{
		width: 90%;
	}
	.backsub {
		width: 4px;
		height: 17px;
		background-color: #007AFF;
		flex-shrink: 0;
		border-radius: 0 50px 50px 0;
	}

	.zhang {
		display: flex;
		align-items: center;
		width: calc(100% - 20px);
		margin-left: 14px;
	}
	.textOver{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		
		margin-left: 14px;
	}
	.cont {
		width: 25px;
		height: 25px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		font-size: 12px;
		margin-left: 5px;
	}

	.disms {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: calc(100% - 20px);
		margin-left: 17px;
	}
	.ml17{
		margin-left: 17px;
	}
	.disau {
		display: flex;
		align-items: center;
	}

	.w50 {
		width: 70px;
		flex-shrink: 0;
	}

	.news {
		background-color: #007AFF;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
		width: 60px;
		height: 60px;
		border-radius: 50%;
		position: fixed;
		right: 20px;
		bottom: 80px;
	}

	.images {
		width: 30px;
		height: 30px;
		flex-shrink: 0;
	}
	.DelectIcon{
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}

	.backcore {
		background-color: #ADB5C5;
		border-radius: 50px 50px 50px 0;
		margin-left: 5px;
		color: #FFFFFF;
		padding: 2px 5px;
		font-size: 10px;
	}

	.mt20 {
		margin-top: 20rpx;
	}
</style>
